import React from 'react';
import root from "../../index";

// 类式组件写法
// class Index extends React.Component {
//     state = {
//         count: 0
//     }
//     add = () => {
//         this.setState({
//             count: this.state.count + 1
//         })
//     }
//
//     componentDidMount() {
//         this.inter = setInterval(() => {
//             this.setState({
//                 count: this.state.count + 1
//             })
//         }, 1000)
//     }
//
//     componentWillUnmount() {
//         clearInterval(this.inter)
//     }
//
//     romoveCur = () => {
//         // ReactDOM.unmountComponentAtNode(document.getElementById('root'))
//         root.unmount()
//     }
//
//     show = () => {
//         alert(this.inputEle.value)
//     }
//
//     render() {
//         return (
//             <div>
//                 <input ref={(c) => {
//                     this.inputEle = c
//                 }} type="text"/>
//                 <h2>当前求和为：{this.state.count}</h2>
//                 <button onClick={this.add}>加1</button>
//                 <button onClick={this.romoveCur}>卸载组件</button>
//                 <button onClick={this.show}>点击提示input数据</button>
//             </div>
//         );
//     }
// }

function Index() {
    const [count, setCount] = React.useState(0)
    const [name, setName] = React.useState(123)

    const myRef = React.useRef()

    // []监测变化的变量，不传第二个参数监测全部，传的话监测指定的变量
    React.useEffect(() => {
        let timer = setInterval(() => {
            setCount(count => count + 1)
        }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [])

    function add() {
        // setCount(count + 1) // 第一种写法
        setCount(() => {  // 第二种写法
            return count + 1
        })
    }

    function changeName() {
        setName('小明')
    }

    function romoveCur() {
        // ReactDOM.unmountComponentAtNode(document.getElementById('root'))
        root.unmount()
    }

    function show() {
        alert(myRef.current.value)
    }

    return (
        <div>
            <h2>当前求和为：{count}</h2>
            <h2>我的名字：{name}</h2>
            <input type="text" ref={myRef}/>
            <button onClick={add}>加1</button>
            <button onClick={changeName}>改名字</button>
            <button onClick={romoveCur}>卸载组件</button>
            <button onClick={show}>点击提示input数据</button>
        </div>
    )
}

export default Index;